<template>
    <div class="app-container">
        <el-form :model="listQuery" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="菜单名称" prop="menuName">
                <el-input v-model="listQuery.menuName" placeholder="请输入菜单名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="listQuery.status" placeholder="菜单状态" clearable>
                    <!-- <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label"
                        :value="dict.value" /> -->
                    <el-option label="enable" value="启用"></el-option>
                    <el-option label="disable" value="禁用"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
            </el-col>
            <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
        </el-row>
        <table-list :tableData="menuList" :tableLabel="columns" :loading="loading"></table-list>
        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="handleQuery" />
        <div class="menu-add-dialog">
            <!-- 添加或修改菜单对话框 -->
            <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
                <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="菜单类型" prop="menuType">
                                <el-radio-group v-model="form.menuType">
                                    <el-radio label="M">目录</el-radio>
                                    <el-radio label="C">菜单</el-radio>
                                    <el-radio label="F">按钮</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="菜单名称" prop="menuType">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="组件" prop="menuType" label-left>
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
import TableList from '@/components/TableList';
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination


//   import Treeselect from "@riophae/vue-treeselect";
//   import "@riophae/vue-treeselect/dist/vue-treeselect.css";
//   import IconSelect from "@/components/IconSelect";

export default {
    name: "Menu",
    components: { TableList, Pagination },
    data() {
        return {
            columns: [
                { id: 1, prop: 'id', label: 'ID' },
                { id: 2, prop: 'name', label: '菜单名称' },
                { id: 3, prop: 'title', label: '标题' },
                { id: 4, prop: 'path', label: '路径' },
                { id: 5, prop: 'component', label: '组件位置' },
            ],
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 菜单表格树数据
            menuList: [],
            // 菜单树选项
            menuOptions: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 是否展开，默认全部折叠
            isExpandAll: false,
            // 重新渲染表格状态
            refreshTable: true,
            // 查询参数
            queryParams: {
                menuName: undefined,
                visible: undefined
            },
            total: 0,
            listQuery: {
                page: 1,
                limit: 20,
                menuName: '',
                status: ''
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                menuName: [
                    { required: true, message: "菜单名称不能为空", trigger: "blur" }
                ],
                orderNum: [
                    { required: true, message: "菜单顺序不能为空", trigger: "blur" }
                ],
                path: [
                    { required: true, message: "路由地址不能为空", trigger: "blur" }
                ]
            }
        };
    },
    created() {
        this.handleQuery();
    },
    methods: {
        // 选择图标
        selected(name) {
            this.form.icon = name;
        },
        /** 查询菜单列表 */
        handleQuery() {
            this.loading = true;
            // api数据请求
            listMenu(this.listQuery).then(response => {
                this.menuList = response.data.data;
                this.total = response.data.total
                this.loading = false;
                console.log(this.menuList)
            })
        },
        /** 转换菜单数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.menuId,
                label: node.menuName,
                children: node.children
            };
        },
        resetQuery() {

        },
        submitForm() {
            this.open = false;
            this.reset();
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                menuId: undefined,
                parentId: 0,
                menuName: undefined,
                icon: undefined,
                menuType: "M",
                orderNum: undefined,
                isFrame: "1",
                isCache: "0",
                visible: "0",
                status: "0"
            };
        },
        /** 新增按钮操作 */
        handleAdd(row) {
            this.reset();
            if (row != null && row.menuId) {
                this.form.parentId = row.menuId;
            } else {
                this.form.parentId = 0;
            }
            this.open = true;
            this.title = "添加菜单";
        },
    }
};
</script>

<style lang="css" scoped>
 .menu-add-dialog>>>.el-form-item label:after {
        content: " ";
        display: inline-block;
        width: 100%;
    }

    .menu-add-dialog>>>.el-form-item__label {
        text-align: justify
    }
    /* 这里去除必选字段的*,这个符号会造成一定影响,去掉之后我用了li列表进行定位,在前面加上" * ". */
    .menu-add-dialog>>>.el-form-item.is-required .el-form-item__label:before {
        content: none !important;
    }

</style>